<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script src="js/three.js"></script>
    <script src="js/OrbitControls.js"></script>
    <script src="js/libs/stats.min.js"></script>
    <script src="js/libs/ThreeBSP.js"></script>
    <script src="js/loader/DDSLoader.js"></script>
    <script src="js/loader/MTLLoader.js"></script>
    <script src="js/loader/OBJLoader.js"></script>
</head>
<body>

<div id="container"></div>
<script>

    var stats;
    var container;
    var camera, controls, scene, renderer,light3,lightHelper;

    init();
    animate(); // remove when using next line for animation loop (requestAnimationFrame)
    //animate();

    function init() {

        scene = new THREE.Scene();

        renderer = new THREE.WebGLRenderer();
        renderer.setClearColor( 0xffffff);
//        renderer.setPixelRatio( window.devicePixelRatio );
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.shadowMapEnabled = true;

        container = document.getElementById( 'container' );
        container.appendChild( renderer.domElement );

        camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 2000;

        controls = new THREE.OrbitControls( camera, renderer.domElement );
        controls.addEventListener( 'change', render ); // remove when using animation loop
        // enable animation loop when using damping or autorotation
        //controls.enableDamping = true;
        //controls.dampingFactor = 0.25;
        controls.enableZoom = true;

        // world


        //geometry part

        var floorGeo = new THREE.CubeGeometry(1600,1300,2);
        var floorMat ;
        var floorMesh;
        var lm = THREE.ImageUtils.loadTexture('model/texture/floor.png');

        floorMat = new THREE.MeshLambertMaterial({map:lm, color:0xBEC9BE, emissive:0xBEC9BE,emissiveIntensity:0.005, overdraw: false});
        floorMat.map.wrapS = THREE.RepeatWrapping;
        floorMat.map.wrapT = THREE.RepeatWrapping;
        floorMat.map.repeat.set(13,10);
        floorMesh = new THREE.Mesh(floorGeo,floorMat);
        floorMesh.position.x=500;
        floorMesh.receiveShadow=true;
        scene.add(floorMesh);




        var  x= new THREE.CubeGeometry(50,50,50);
        var y = new THREE.MeshLambertMaterial();
        var z = new THREE.Mesh(x,y);
        z.position.x=500;
        scene.add(z);

        light3 = new THREE.DirectionalLight(0xffffff);
        light3.position.x=50;
        light3.position.z=200;
        light3.target=z;
        light3.shadowCameraVisible=true;
        scene.add( light3 );
        lightHelper= new THREE.DirectionalLightHelper(light3);


        scene.add( lightHelper );

        //

        stats = new Stats();
        container.appendChild( stats.dom );

        //

        window.addEventListener( 'resize', onWindowResize, false );

    }

    function onWindowResize() {
        light3.target=target;
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();

        renderer.setSize( window.innerWidth, window.innerHeight );

    }

    function animate() {

        requestAnimationFrame( animate );

        controls.update(); // required if controls.enableDamping = true, or if controls.autoRotate = true
        lightHelper.update();
        stats.update();

        render();

    }


    function render() {

        renderer.render( scene, camera );

    }

</script>
</body>
</html>